<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>git_log_写日志_1.1</title>
    <style>
        h3 {
            margin: 5px 0;
            padding: 0;
        }

        textarea {
            width: 99%;
        }

        .active h3 {
            color: red;
        }

        .active textarea {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <font color="red">获取git日志，方便些周报：git log --oneline --no-merges --author="^作者" --after="2021.04.20"</font>
        <br /><br />

        原内容： <br />
        <textarea name="content" id="content" cols="30" rows="10" style="" placeholder="请输入获取的git日志"></textarea>

        <br />
        配置：
        【<input type="checkbox" name="is_replace_content" value="1" />功能操作后，替换原内容】
        【<input type="checkbox" name="is_add_xuhao_del" value="1" />添加序号时，存在的序号删除】
        【<input type="checkbox" name="is_add_xuhao_daoxu" value="1" />添加序号时，内容倒叙】
        【<input type="checkbox" name="is_reset_xuhao_daoxu" value="1" />重置序号时，内容倒叙】
        <br /><br />

        功能：
        【<button type="button" onclick="javascript:daoxu()">倒叙</button>】

        【<button type="button" onclick="javascript:addXuhao()">添加序号</button>】

        【<button type="button" onclick="javascript:resetXuhao()">重置序号</button>】

        【<button type="button" onclick="javascript:regReplace()">正则替换</button>
        -
        <input type="text" id="reg_rule" placeholder="请输入正则表达式" value="^[0-9a-z]+\s"> -
        <input type="text" id="reg_content" placeholder="请输入替换内容">】

        <hr id="hr_div" />

        <script>
            /**
             * 倒叙
             */
            function daoxu() {
                let contentV = document.querySelector('#content').value;
                let arr = [], contentVArr = contentV.split(/\n/i).reverse();
                contentVArr.forEach(function (item, index) {
                    let nindex = index + 1;
                    nindex < 10 && (nindex = '0' + nindex);
                    arr.push(item.replace(/^(\d+)\./, nindex + '.'));
                });

                showTpl({ id: 'daoxu_div', title: '倒叙内容', data: arr });
            }

            /**
             * 添加序号
             */
            function addXuhao() {
                let contentV = document.querySelector('#content').value,
                    isAddXuhaoDel = document.querySelector('[name=is_add_xuhao_del]').checked,
                    isAddXuhaoDaoxu = document.querySelector('[name=is_add_xuhao_daoxu]').checked;

                let arr = [], contentVArr = contentV.split(/\n/i);
                isAddXuhaoDaoxu && (contentVArr = contentVArr.reverse());
                contentVArr.forEach(function (item, index) {
                    let nindex = index + 1;
                    nindex < 10 && (nindex = '0' + nindex);
                    isAddXuhaoDel && (item = item.replace(/^(\d+)\./, ''));

                    arr.push(nindex + '.' + item);
                });

                showTpl({ id: 'add_xuhao_div', title: '添加序号', data: arr });
            }

            /**
             * 重置序号
             */
            function resetXuhao() {
                let contentV = document.querySelector('#content').value,
                    isResetXuhaoDaoxu = document.querySelector('[name=is_reset_xuhao_daoxu]').checked;

                let arr = [], contentVArr = contentV.split(/\n/i);
                isResetXuhaoDaoxu && (contentVArr = contentVArr.reverse());
                contentVArr.forEach(function (item, index) {
                    let nindex = index + 1;
                    nindex < 10 && (nindex = '0' + nindex);
                    arr.push(item.replace(/^(\d+)\./, nindex + '.'));
                });

                showTpl({ id: 'reset_xuhao_div', title: '重置序号', data: arr });
            }

            /**
             * 重置
             */
            function regReplace() {
                let contentV = document.querySelector('#content').value,
                    regRuleV = document.querySelector('#reg_rule').value,
                    regContentV = document.querySelector('#reg_content').value,
                    reg = new RegExp(regRuleV, 'ig');
                let arr = [], ncvArr = contentV.split(/\n/i);
                ncvArr.forEach(function (item, index) {
                    let nv = item.replace(reg, regContentV);
                    nv && arr.push(nv);
                });

                showTpl({ id: 'reg_replace_div', title: '正则替换', data: arr });
            }
        </script>

        <script>
            /**
             * 显示模板
             */
            function showTpl(option = {}) {
                let tplId = option.id, tplTitle = option.title, tplContent = option.data.join('\n'),
                    tpl = `<div id="${tplId}" class="active"><h3>${tplTitle}：</h3><textarea cols="30" rows="10">${tplContent}</textarea></div><hr />`,
                    isReplace = document.querySelector('[name=is_replace_content]').checked;

                if (isReplace) {
                    console.log(tplContent);
                    document.querySelector('#content').value = tplContent;
                } else {
                    document.querySelector('.active') && document.querySelector('.active').classList.remove('active');
                    document.querySelector('#' + tplId) && document.querySelector('#' + tplId).remove();
                    document.querySelector('#hr_div').insertAdjacentHTML('afterend', tpl);
                }
            }
        </script>
    </div>
</body>

</html>